<template>
   <el-scrollbar>
    <div>
    <div class="box bg-fff flex jc-sb aic pr-20">
      <p class="pl-20">
        <strong class="f17 fw-700">仪表盘</strong>
        <span class="f14"> - 设备概览和传感数据可视化。</span>
      </p>
    </div>

    <div class="equipment flex mt-10">
      <el-card class="item">
        <template #header>
          <div class="card-header f14 flex aic rel">
            <strong>设备概览</strong>
            <div class="row center mt-5 ml-5">
              <el-popover
                popper-style="background: gray; color: #fff"
                width="335"
                class="box-item pl-10"
                content="统计当前账号下，绑定网关和传感器节点的总数量"
                placement="bottom-start"
              >
                <template #reference>
                  <el-icon><QuestionFilled /></el-icon>
                </template>
              </el-popover>
            </div>
            <el-link class="abs f12" style="right: 10px; color: #409eff"
              >绑定设备</el-link
            >
          </div>
        </template>
        <div>
          <div class="flex aic jc-sb lh15">
            <img
              style="width: 51px; height: 95px"
              src="../../assets/gateway.png"
            />
            <el-divider class="line" direction="vertical" />
            <div class="flex fdc aic">
              <h1 class="fw-700">{{countData.LoRaWAN?.total}}</h1>
              <strong>LoRaWAN</strong>
              <p>网关</p>
            </div>
            <el-divider class="line" direction="vertical" />
            <div class="flex fdc aic">
              <h1 class="fw-700">{{countData.LoRaPP?.total}}</h1>
              <strong>LoRaPP</strong>
              <p>网关</p>
            </div>
            <el-divider class="line" direction="vertical" />
            <div class="flex fdc aic">
              <h1 class="fw-700">{{countData.group}}</h1>
              <p>群组</p>
            </div>
            <el-divider class="line" direction="vertical" />
            <img
              style="width: 18px; height: 38px"
              src="../../assets/devNode2.png"
              alt=""
            />
            <div class="flex fdc aic">
              <h1 class="fw-700">{{countData.sensor?.total}}</h1>
              <p>传感器节点</p>
            </div>
          </div>
        </div>
      </el-card>
      <el-card  style="max-width: 300px;height: 250px;" class="item ml-10 mr-10">
        <template #header>
          <div class="card-header f14 flex aic rel">
            <strong>监控</strong>
            <div class="row center mt-5 ml-5">
              <el-popover
                popper-style="background: gray; color: #fff"
                width="335"
                class="box-item pl-10"
                content="统计当前账号下，绑定网关和传感器节点的总数量"
                placement="bottom-start"
              >
                <template #reference>
                  <el-icon><QuestionFilled /></el-icon>
                </template>
              </el-popover>
            </div>
          </div>
        </template>
        <div class="f14">
          <p class="flex p-5 aic jc-sb">
            <span>网关离线</span> <el-tag round type="success">{{countData.sensor?.online}}</el-tag>
          </p>
          <p class="flex p-5 aic jc-sb">
            <span>节点离线</span> <el-tag round type="success">{{countData.sensor?.offline}}</el-tag>
          </p>
          <p class="flex p-5 aic jc-sb">
            <span>传感器低电量</span> <el-tag round type="danger">{{countData.sensor?.lowBattery}}</el-tag>
          </p>
        </div>
      </el-card>

      <el-card style="max-width: 293px;" class="item">
        <template #header>
          <div class="card-header f14 flex aic rel">
            <strong>公告</strong>
            <div class="row center mt-5 ml-5">
              <el-popover
                popper-style="background: gray; color: #fff"
                width="335"
                class="box-item pl-10"
                content="统计当前账号下，绑定网关和传感器节点的总数量"
                placement="bottom-start"
              >
                <template #reference>
                  <el-icon><QuestionFilled /></el-icon>
                </template>
              </el-popover>
            </div>
          </div>
        </template>
        <div style="height: 60px" class="f14 flex fdc jc-sa">
          <p class="flex aic jc-sb">
            <el-icon style="color: #06d106"><Warning /></el-icon
            ><span>senseCAP V3.0 2020-02-13 14:28:07</span>
          </p>
          <p class="flex aic jc-sb">
            <el-icon style="color: #06d106"><Warning /></el-icon
            ><span>senseCAP V3.0 2020-02-13 14:28:07</span>
          </p>
        </div>
      </el-card>
    </div>

    <div class="home flex fww mt-10">
      <!-- 空气湿度折线图 -->
      <Air :air="data.air" />
      <!-- 光照 -->
      <Beam :beam="data.beam" />
      <!-- 气压 -->
      <Pressure :pressure="data.pressure"></Pressure>
      <!-- 土壤湿度 -->
      <Soil :soil="data.soil" />
    </div>
  </div>
   </el-scrollbar>
 
</template>

<script setup>
import { Warning } from "@element-plus/icons-vue";
import Air from "./Air.vue";
import Beam from "./Beam.vue";
import Pressure from "./Pressure.vue";
import Soil from "./Soil.vue";
import { $sensorCount,$deviceCount } from "../../api/index";
import { onMounted, ref } from "vue";
const data = ref({});
const getData = async () => {
  let res = await $sensorCount();
  data.value = res.data;
};
const countData = ref({})
const getCountData = async () => {
  let res = await $deviceCount();
  countData.value = res.data;
}
onMounted(() => {
  getData(); 
  getCountData();
}
);
</script>
<style lang="less">
.box {
  height: 60px;
}
.equipment {
  .item {
    flex-grow: 1;
  }
}
.home {
  .item {
    width: 40%;
    flex-grow: 1;
    margin-bottom: 5px;

    &:nth-child(even) {
      margin-left: 5px;
    }
  }
}
.line {
  height: 50px;
  border-left-width: 2px;
  &:nth-child(8) {
    height: 100px;
  }
}
</style>